@charset 'utf-8';
$font-size:20px;
@function h($px){
    @return $px/$font-size*(640/640)*1rem;
}
html{
    font-size: $font-size;
}
.web{
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    text-align: center;
    box-sizing: border-box;
    padding-bottom: h(43px);
    .bg{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -9999;
    }
    .nv{
        font-size: h(30px);
        color: #E7C598;
        box-sizing: border-box;
        padding-top: h(28px);
        a{
            display: inline-block;
            position: relative;
            width: h(67px);
            height: h(36px);
            &::after{
                content: "";
                display: block;
                width: 100%;
                height: h(1px);
                background: #E7C598;
                position: absolute;
                left: -5%;
                top: 120%;
            }
        }
        span{
            letter-spacing: h(5px);
            font-style: italic;
        }
    }
    .guest-seat{
        box-sizing: border-box;
        padding-top: h(82px);
        padding-bottom: h(45px);
        .content{
            width: h(120px);
            height: h(120px);
            border-radius:50%;
            background: #E7C598;
            margin: 0 auto;
            text-align: center;
            line-height: h(120px);
            position: relative;
            span{
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            p{
                font-size: h(20px);
                color: #BF0C21;
                letter-spacing: h(3px);
            }
            .big{
                width: h(50px);
                height: h(50px);
                background: #E7C598;
                border-radius: 50%;
                text-align: center;
                line-height: h(50px);
                position: absolute;
                .iconfont{
                    font-size: h(14px);
                    color: #BF0C21;
                }
            }
            .seat1{
                left: h(38px);
                top: h(-60px);
            }
            .seat2{
                top: h(-10px);
                right: h(-50px);
            }
            .seat3{
                top: h(84px);
                right: h(-50px);
            }
            .seat4{
                left: h(38px);
                bottom: h(-60px);
            }
            .seat5{
                top: h(84px);
                left: h(-50px);
            }
            .seat6{
                top: h(-10px);
                left: h(-50px);
            }
        }
    }
    .seat{
        box-sizing: border-box;
        padding-left: h(84px);
        padding-right: h(84px);
        .section{
            width: 50%;
            text-align: center;
            box-sizing: border-box;
            padding-bottom: h(55px);
            padding-top: h(55px);
            .content{
                width: h(90px);
                height: h(90px);
                border-radius: 50%;
                background: #E7C598;
                position: relative;
                text-align: center;
                line-height: h(90px);
                margin: 0 auto;
                span{
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
                p{
                    font-size: 0.8rem;
                    color: #BF0C21;
                }
                .add{
                    font-size: h(80px);
//                  width: 100%;
//                  height: 100%;
                }
                .seat1,.seat2,.seat3,.seat4,.seat5,.seat6{
                    width: h(36px);
                    height: h(36px);
                    background: #E7C598;
                    border-radius: 50%;
                    text-align: center;
                    line-height: h(36px);
                    position: absolute;
                    .iconfont{
                        font-size: h(15px);
                        color: #BF0C21;
                    }
                }
                .seat1{
                    top: h(-42px);
                    left: h(26px);
                }
                .seat2{
                    top:h(-7px);
                    right: h(-35px);
                }
                .seat3{
                    top: h(60px);
                    right: h(-35px);
                }
                .seat4{
                    left: h(26px);
                    bottom: h(-42px);
                }
                .seat5{
                    top: h(60px);
                    left: h(-35px);
                }
                .seat6{
                    top: h(-7px);
                    left: h(-35px);
                }
            }
        }
    }
    .img{
        width: h(320px);
        height: h(45px);
        margin: 0 auto;
        margin-top: h(40px);
        img{
            width: 100%;
            height: 100%;
        }
        
    }
    .home{
        width: h(41px);
        height: h(41px);
        text-align: center;
        line-height: h(41px);
        border-radius: 50%;
        background: #E7C598;
        position: fixed;
        right: h(56px);
        bottom: h(25px);
        a{
            font-size: h(30px);
            color: #BF0C21;
        }
        
    }
    .bei{
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.5);
        position: fixed;
        left: 0;
        top: 0;
        .con{
            width: h(414px);
            height: h(250px);
            border-radius: h(10px);
            background: #E7C598;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            box-sizing: border-box;
            padding-top: h(80px);
            p{
                font-size: h(30px);
                color: #BF0C21;
            }
            .p_two{
                margin-top: h(16px);
            }
            .iconfont{
                position: absolute;
                right: h(16px);
                top: h(14px);
                font-size: h(36px);
                color: #BF0C21;
            }
        }
    }
}
